import React from 'react';
import {
  View,
  Image,
  Text,
  StyleSheet,
  TouchableOpacity,
  Platform
} from 'react-native';

import CommonListPage from '../common/CommonListPage';
import SizeUtils from '../../common/SizeUtils';
import HeartRequestZJListAction from '../../actions/heart/HeartRequestZJListAction';
import HeartRequestZJMsgCountAction from '../../actions/heart/HeartRequestZJMsgCountAction';
import BaseItem from '../common/BaseItem';
import Config from '../../config';
import {DateUtils} from '../../utils/Utils';
import TImage from '../../components/TImage';
import CommonStyles from '../../common/CommonStyles';

export default class HeartZJListPage extends CommonListPage {
  constructor(props) {
    super(props);

    this._showType = 0;
    this._viewPager = null;
    this._noEmpty = true;
    this.state.msgData = null;
    
    this._dataKey = "expert_id";
  }

  _getListViewStyle() {
    return {
        alignItems: 'center',
        width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(25),
        height:(SizeUtils.getWindowSize().height - Config.paddingTop),
        backgroundColor:"#ffffff"};
  }

  _getViewStyle() {
    return {paddingTop:Platform.OS === "ios"?(Config.paddingTop + SizeUtils.translateDesignHeightToCode(20)):SizeUtils.translateDesignHeightToCode(66),justifyContent: 'space-around',
         backgroundColor:"#ffffff"}
  }

  _renderNavigationBarRightButtonContent() {
    return (
      <View style={{paddingTop:SizeUtils.translateDesignWidthToCode(10),paddingRight:SizeUtils.translateDesignWidthToCode(10),}}>
        <TImage source={require("../../../resource/images/heart/icon_message_red.png")}
          style={{width:34,height:34}}/>
        {this._renderRedPoint()}
      </View>
    )
  }

  _renderRedPoint(){
    if(this.state.msgData > 0)
    {
      return(
        <TImage source={require("../../../resource/images/heart/new.png")}
          style={{width:14, height:14,position:"absolute", top:0, right:0}}/>
      )
    }
  }

  _onPressNavigationBarRightBtn() {
    this.gotoPage(Config.pages.heart_msg_list_page,{type:2});
  }

  _requestData(page, listView) {
      new HeartRequestZJListAction().call(listView, {page:page, page_size:10,  sort_id:1 });
      new HeartRequestZJMsgCountAction().call(this, {type:2});
      if(this._listView != null){
        this._listView.doRefresh();
      }

  }

  _onPressItem(data) {
    data.type = 2;
    this.gotoPage(Config.pages.heart_expert_data, data);
  }

  _onRenderItem(data, rowID) {
    return (
      <Item key={rowID} data={data} rowID={rowID}/>
    )
  }
}

class Item extends BaseItem {
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.props.data != nextProps.data;
  }

  render() {
    return (
        <View
          style={{flex:1, flexDirection:"row",
              backgroundColor:"#ffffff",
              borderColor:"#eeeeee",
              marginLeft:SizeUtils.translateDesignWidthToCode(40),
              marginTop:SizeUtils.translateDesignHeightToCode(30),
              paddingBottom:SizeUtils.translateDesignHeightToCode(30),
              width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
              borderBottomWidth:SizeUtils.translateDesignNumToCode(3)}}>
            <TImage source={this._getImageSource(this.props.data)}
              style={{width:200,height:230}}/>
            <View style={{flex:1,paddingLeft:SizeUtils.translateDesignWidthToCode(30)}}>
                  <Text
                    style={[CommonStyles.primaryText, {fontSize:SizeUtils.translateFontSizeToCode(48)}]}>
                      {this.props.data.name}
                  </Text>
                  <Text
                    style={[CommonStyles.primaryText, {color:'#888888',paddingTop:SizeUtils.translateDesignHeightToCode(10),fontSize:SizeUtils.translateFontSizeToCode(30)}]}>
                      {this.props.data.title}
                  </Text>
                  <Text
                    numberOfLines={3}
                    style={[CommonStyles.primaryText, {paddingTop:SizeUtils.translateDesignHeightToCode(10),
                        lineHeight:SizeUtils.translateDesignHeightToCode(40),fontSize:SizeUtils.translateFontSizeToCode(28),}]}>
                      {this.props.data.desc1}
                  </Text>
            </View>
        </View>
    )
  }

  _getImageSource(data) {
    if(data.image_urls && data.image_urls[0]) {
      return {uri: data.image_urls[0]};
    }
    else {
      return {uri: ""};
    }
  }

  _getTimeStr(time) {
    var timeStr = DateUtils.formatActivity(time)
    return timeStr;
  }
}
